<template>
	<a-typography-text strong>
		<blockquote>房屋配置</blockquote>
	</a-typography-text>
	<!-- <div class="d-module-title">
			<b>房屋配置</b>
		</div> -->
	<a-space direction="vertical" style="width: 100%">
		<vxe-table border show-header-overflow show-overflow align="left"  size="small"  :row-config="{isHover: true}" :data="infos.articles">
			<vxe-column title="种类" :minWidth="100" field="typeName"></vxe-column>
			<vxe-column title="物品名称" :minWidth="100" field="configName"></vxe-column>
			<vxe-column title="价格(元)" :minWidth="80" field="price"></vxe-column>
			<vxe-column title="数量" :minWidth="50" field="count"></vxe-column>
			<vxe-column title="是否损坏" :minWidth="150" align="center">
				<template #default="{row}">
					<vxe-checkbox v-model="checkboxList[row.isBroken]" disabled></vxe-checkbox>
				</template>
			</vxe-column>
		</vxe-table>
	</a-space>

	<a-typography-text strong v-if="infos.comment">
		<blockquote>备注</blockquote>
	</a-typography-text>
	<a-space direction="vertical" style="width: 100%" v-if="infos.comment">
		<div>{{ infos.comment}}</div>
	</a-space>

	<a-typography-text strong >
		<blockquote>水电燃气底数</blockquote>
	</a-typography-text>
	<a-descriptions :column="5" >
		<a-descriptions-item v-for="meter in infos.meters" :key="meter.deviceType">
			<template #label>
				{{ METER_DEVICE_MAP[meter.deviceType] }}
			</template>
			<template v-if="meter.read !== null">{{ meter.read }} {{ meter.suffix }}</template>
			<template v-else>无</template>
		</a-descriptions-item>
	</a-descriptions>
	<a-typography-text strong>
		<blockquote>附件</blockquote>
	</a-typography-text>
	<file-preview v-if="infos.attachmentDtos && infos.attachmentDtos.length" :files="infos.attachmentDtos" />
	<div v-color="{color: 'gray'}" v-else>未上传附件</div>
</template>
<script setup lang="ts">
	import {onMounted, reactive, ref} from 'vue'
	import {getHouseDeliveryGetNoe} from '@/api/contract'
	import FilePreview from '@/components/common/file-preview.vue'
	import {METER_DEVICE_MAP} from '@/constant/device'
	import {defaultMeters} from '@/interface/contract'
	import XEUtils from 'xe-utils'

	const props = defineProps({
		contractId: {
			type: [String, Number],
			default: ''
		}
	})
	const checkboxList = ref<any>([false, true])
	const infos = ref<any>({})
	onMounted(() => {
		const params = {
			id: props.contractId,
			type: 2
		}
		getHouseDeliveryGetNoe(params).then((res: any) => {
			infos.value = res.data || {}
			infos.value.meters = XEUtils.merge(defaultMeters(), infos.value.meters)
		})
	})
</script>
<style lang="less" scoped>
	.d-module-title {
		margin: 15px 0 5px;
	}
</style>
